<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		/*#div{position:absolute;width:100px;height:100px;background:aqua;}*/
		#div img{width: 80px;height: 80px;background-size: 80px 80px;position: fixed;z-index: 500;left: 10px;}
	</style>
</head>
<body>

<div id="div">
<!-- <div id="div" style="transition: all 1s"> -->
	<img src="img/add.png" id="#bounce">
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	function bounce() {
	$('#div img').animate({"top":"20px",},100).animate({"top":"0",},100)
		.animate({"top":"15px",},100).animate({"top":"-0px",},100)
		.animate({"top":"10px",},100).animate({"top":"0",},100)
	} 
	bounce()
// $("#div").animate({
//    // "-webkit-transform":"rotate(50deg)";

// },function(){   

// $("#div").css({'width':'300px','height':'300px','transform':'rotate(10deg)'});                                  
// })
  // 第一个花括号里面是动画内容，可以为空，但不能省去中括号
// 在回调函数里面改变css属性来实现transform中的动画变换 
// ps:在同时使用多个transform属性时，用空格符隔开多个属性值，如：
// transform:rotate(180deg) translate(200px);
</script>
</body>
</html>